<script>
import Input from '@/views/attendances/components/Input.vue'
import Children from '@/views/attendances/components/Children.vue'

export default {
  name: 'attendances',
  data() {
    return {
      mobile: '13237429584',
      num: 0
    }
  },
  methods: {
    handleInput(value) {
      this.mobile = value
    },
    handleAdd(num) {
      this.num = num
    }
  },
  components: {
    Children,
    Input
  }

}
</script>

<template>
  <div class="attendances">
    <el-card>
      <template #header>
        <span>.sync修饰符、v-model指令的使用</span>
      </template>
      <div>
        <span>手机号:{{ mobile }}</span>
        <!--
        v-model的实现原理:
          1.本质上是绑定一个value属性给子组件
          2.然后绑定一个input事件给子组件
          3.子组件触发input事件后将子组件的值传递给父组件，父组件进行重新赋值
        -->
        <Input placeholder="v-model的实现原理" size="mini" :value="mobile" @input="handleInput"></Input>
        <!--v-model的语法糖-->
        <Input placeholder="v-model语法糖" size="mini" v-model="mobile"></Input>
      </div>
      <div style="margin-top: 20px">
        <!--
        sync修饰符的实现原理:
          1.本质上是绑定一个xxx属性给子组件
          2.然后绑定一个update:xxx事件给子组件
          3.子组件触发update:xxx事件后将子组件的值传递给父组件，父组件进行重新赋值
        -->
        <span>洗脚次数为:{{ num }}</span>
        <Children :num="num" @update:num="handleAdd"></Children>
        <!--sync修饰符-->
        <Children :num.sync="num"></Children>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.attendances {
  .el-card {
    margin-top: 10px;
  }
}
</style>
